<template>
  <div class="check-product-dialog">
    <el-dialog
      :title="dialogMsg"
      :visible.sync="showDialog"
      width="78%"
      :before-close="cancelBtn"
    >
      <div class="dialog-content">
        <div class="search-part">
          <el-form
            class="search-box"
            ref="searchForm"
            :model="searchForm"
            label-width="100px">
            <el-form-item
              label="产品名称"
              prop="productName">
              <el-input
                v-model="searchForm.productName"
                placeholder="请输入"/>
            </el-form-item>
            <el-form-item
              label="平台编码"
              prop="platCode">
              <el-input
                v-model="searchForm.platCode"
                placeholder="请输入"/>
            </el-form-item>
            <el-form-item
              label="注册证号"
              prop="registNo">
              <el-input
                v-model="searchForm.registNo"
                placeholder="请输入"/>
            </el-form-item>
            <el-form-item
              label="生产厂家"
              prop="manufacturer">
              <el-input
                v-model="searchForm.manufacturer"
                placeholder="请输入"/>
            </el-form-item>
            <el-form-item
              label="规格"
              prop="spec">
              <el-input
                v-model="searchForm.spec"
                placeholder="请输入"/>
            </el-form-item>
            <el-form-item
              label="型号"
              prop="model">
              <el-input
                v-model="searchForm.model"
                placeholder="请输入"/>
            </el-form-item>
            <el-form-item
              label="注册证类型"
              prop="regCertificateType">
              <el-select
                v-model="searchForm.regCertificateType"
                placeholder="请选择">
                <el-option
                  label="国产"
                  value="0"/>
                <el-option
                  label="进口"
                  value="1"/>
                <el-option
                  label="港澳台"
                  value="2"/>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="searchFormData">查询</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-editable
          class="edit-box"
          v-loading="table.loading"
          :data="table.data"
          height="400"
          :columns="table.tableColumns"
          @selection-change="handleSelectionChange"
        />
        <!-- 分页模块 -->
        <el-pagination
          align="right"
          style="margin-top:10px;"
          @size-change="sizeChange"
          :page-sizes="PAGE_NUMBER"
          :page-size="page.size"
          :current-page="page.page"
          @current-change="pageChange"
          :layout="PAGINATION_LAYOUT"
          :total="page.total"
        />
      </div>
      <span
        slot="footer"
        class="dialog-footer">
        <el-button @click="cancelBtn">取 消</el-button>
        <el-button
          type="primary"
          @click="confirmBtn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import ElEditable from '@components/el-editable'
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common'
import paginationMixin from '@mixins/paginationMixin'
import SearchForm from '@components/businesscomponents/search'
import { listBeforeAddComProd } from '@const/productCenterApiV2'
import { cloneDeep, hasIn, isObject } from 'lodash'
export default {
  name: 'CheckProductDialog',
  components: { ElEditable, SearchForm },
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    columns: {
      type: Array,
      default: () => []
    }
    // title: {
    //   type: String
    // }
  },
  data () {
    return {
      page: {
        page: 1,
        size: 20,
        total: 0
      },
      dialogMsg: `勾选企业产品`,
      table: {
        data: [],
        tableColumns: this.columns,
        loading: false
      },
      checkoutList: [],

      PAGE_NUMBER,
      PAGINATION_LAYOUT,

      searchForm: {
        manufacturer: '', // 生产厂家
        model: '', // 型号
        platCode: '', // 平台编码
        productName: '', // 产品名称
        regCertificateType: '', // 关联注册证类型
        registNo: '', // 注册证号
        spec: '' // 规格
      }
    }
  },
  watch: {
    showDialog (val) {
      if (val) {
        this.getProductList()
      }
    }
  },
  methods: {
    // 重置
    resetForm () {
      this.$refs['searchForm'].resetFields()
    },
    // 查询
    searchFormData () {
      this.page.page = 1
      this.getProductList()
    },
    handleClose (val) {
      this.$emit('cancelDialog', val)
    },
    // 取消
    cancelBtn () {
      let arr = []
      this.handleClose(arr)
    },
    // 确定
    confirmBtn () {
      this.handleClose(this.checkoutList)
    },
    // 勾选产品
    handleSelectionChange (val) {
      this.checkoutList = val
    },
    // 获取产品列表
    getProductList () {
      this.table.loading = true
      let data = {
        ...this.searchForm,
        page: this.page.page,
        pageSize: this.page.size
      }
      this.$axios
        .post(listBeforeAddComProd, data)
        .then(res => {
          this.table.data = hasIn(res, ['data', 'payload', 'content'])
            ? res.data.payload.content
            : []
          this.page.total = hasIn(res, ['data', 'payload', 'totalElements'])
            ? res.data.payload.totalElements
            : 0
        })
        .finally(res => {
          this.table.loading = false
        })
    },
    // 页码更改
    sizeChange (size) {
      this.page.size = size
      this.getProductList()
    },
    // 切换不一样的页面,重置一切数据
    pageChange (curPage) {
      this.page.page = curPage
      this.getProductList()
    }
  }
}
</script>
<style lang="less">
.search-box {
  display: flex;
  flex-wrap: wrap;
}
</style>
